<!-- 系统消息 -->
<template>
  <div class="SystemMessage">
    <NavBarHeader class='navBarHeader'></NavBarHeader>
    <div class="container">
      <img src="./../../public/img/home/messageImg.png" class="messageImg">
      <div class="messageList" v-for="(item,index) of messageList" :key="index">
        <div class="styleBorder"></div>
          <div class="titleBox">
          <div class="titleName">{{item.title}}</div>
          <div class="timeName">{{item.create_time}}</div>
        </div>
        <div class="messageInfo">{{item.content}}</div>
      </div>
      <div class="styleBorder1"></div>
    </div>
    <div v-if="messageList.length<1" class="noMsgBox">
    <div  class="noMsg"></div>
    <div class="noMsgBoxName">暂无系统通知</div>
    </div>
  </div>
</template>

<script >
import NavBarHeader from "./../components/NavBarHeader";
import {getListMsg} from './../apis/api.js'
export default {
// import引入的组件需要注入到对象中才能使用
components: {NavBarHeader},
  data() {
 // 这里存放数据
    return {
      page:1,
      lengthConot:999999,
      messageList:[]
    }
  },
// 过滤器
filters: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 方法集合
methods: {
  async getListMsg (){
    let data = {
      page:this.page,
      length:this.lengthConot
    }
    let res = await getListMsg(data)
    if(res.data.result == '1'){
      this.list = res.data.body.messageList
    }
  }
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.getListMsg()
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, // 生命周期 - 创建之前
beforeMount() {}, // 生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 - 更新之后
beforeDestroy() {}, // 生命周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.navBarHeader{
  background: #1c1e2b;
  z-index: 1000;
}
.container{
  width: 1180px;
  height: 100%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 50px;
}
.messageImg{
  width: 185px;
  height: 68px;
  padding-top: 60px;
  margin-left: 30px;
}
.messageList{
  margin:  0 30px 0 30px;
}
.styleBorder{
  border-top: 1px solid #E7E7E7;
  margin: 30px auto 0 auto ;
}
.styleBorder1{
  border-top: 1px solid #E7E7E7;
  margin: 30px 30px 0 30px ;
}
.messageInfo{
  margin-top: 10px;
  color: #999;
  font-size: 14px;
}
.titleBox{
  display: flex;
  align-items: center;
  padding-top: 20px;
  box-sizing: border-box;
}
.timeName{
  margin-left: 20px;
  color: #999;
  font-size: 14px;
}
.titleName{
  font-size: 16px;
  color: #333;
}
.noMsgBox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  font-size: 14px;
  color: #333;
}
.noMsg{
  background: url('./../../public/img/home/noMsg.png') no-repeat;
  background-size: 100%,100%;
  width: 371px;
  height: 200px;
}
.noMsgBoxName{
  margin-top: 20px;
}
</style>
